<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg no-smil svgclippaths">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/bs/css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/bootstrap-table/extensions/sticky-header/bootstrap-table-sticky-header.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/sweetalert/sweetalert.min.css" rel="stylesheet" type="text/css">

		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/core.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/components.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/icons.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/pages.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/responsive.css" rel="stylesheet" type="text/css">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/custombox/custombox.min.css" rel="stylesheet">
		<link href="http://cdn.xtcrm.com/cdn//v7/fm/ub/css/css.css" rel="stylesheet" type="text/css">
		<!--[if lt IE 9]>
    <script src="http://cdn.xtcrm.com/cdn//v7/fm/ub/js/html5shiv.js"></script>
    <script src="http://cdn.xtcrm.com/cdn//v7/fm/ub/js/respond.min.js"></script>
    <![endif]-->

		<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>

		<title>选择仓库生成出库单</title>

		<div class="createOrderbox">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">

				<div class="container-fluid m-t-20">
					<h4><b>选择仓库出库</b></h4>
					<h5><b>1.核对库存数量</b>（<b class="text-danger">红</b>：库存<b>&gt;</b>出库需求；<b class="text-success">绿</b>：库存<b>&lt;</b>出库需求）</h5>
					<div style="overflow-x: auto;">
						<div class="bootstrap-table">
							<div class="fixed-table-container overflow-x-auto">
								<table class="table table-bordered table-hover">
									<thead>
										<tr>
											<th class="th-inner">产品</th>
											<th class="text-right th-inner"><b>需求数量</b></th>
											<th class="text-right th-inner"><b>最好的仓库</b></th>
											<th class="text-right th-inner"><b>全国仓库</b></th>
											<th class="text-right th-inner"><b>北京仓库</b></th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="(colle,i) in goodItems">
											<td>{{colle.gname}}
												<a href="javascript:vopen('/xcrm/market/product/detail.xt?id=106','product106',999,600);"><i class="fa fa-folder-open m-l-5" data-original-title="打开详细页面" data-toggle="tooltip" data-placement="bottom"></i></a>
											</td>
											<td align="right" >{{colle.gqueaty}}</td>
											<td align="right" >
												<font color="green" v-if="colle.gqueaty>colle.adeport">{{colle.adeport}}</font>
												<font color="red" v-if="colle.gqueaty<=colle.adeport">{{colle.adeport}}</font>
											</td>
											<td align="right">
												<!-- <font color="green">{{colle.bdeport}}</font> -->
												<font color="green" v-if="colle.gqueaty>colle.bdeport">{{colle.bdeport}}</font>
												<font color="red" v-if="colle.gqueaty<=colle.bdeport">{{colle.bdeport}}</font>
											</td>
											<td align="right">
												<!-- <font color="green">{{colle.cdeport}}</font> -->
												<font color="green" v-if="colle.gqueaty>colle.cdeport">{{colle.cdeport}}</font>
												<font color="red" v-if="colle.gqueaty<=colle.cdeport">{{colle.cdeport}}</font>
											</td>
										
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<h5><b>2.选择出库仓库</b></h5>
					<form class="form-horizontal" onsubmit="return chksub();" action="selok.xt" method="POST">
						<div class="form-group">
							<label class="col-xs-1 control-label">选择仓库：</label>
							<div class="col-xs-2">
								<!--仓库-->
								<el-col :span="14" class="dd">
									<el-form-item prop="deport">
										<el-select v-model="ruleForm.deport" placeholder="请选择" style="width: 220px;">
											<el-option v-for="item in ruleForm.customertoman" :key="item.dgsnum" :label="item.dgsname" :value="item.dgsnum">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<!--仓库-->
							</div>
						</div>

						<p class="text-center">
							<input name="autotype" id="autotype" type="hidden" value="0">
							<input name="B1" class="btn btn-primary" type="button" @click="submitForm('ruleForm')" value="下一步：生成出库单"></p>
					</form>
					<div class="alert alert-success"><b>提示</b>：<br>在多库的情况下，只要总库存数量足够发货，即可指定从某库出库；<br> 如果该库库存不够，可由库管操作库间调拨后发货。
					</div>

				</div>

			</el-form>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: ".createOrderbox",
				data: {

					/*商品需求、对应仓库数量*/
					goodItems:[],
					ruleForm: {
					    /*订单id*/
					    oid:"",
						/*仓库*/
						deport: "",
						customertoman: [{
							adid: '选项1',
							adn: '黄金糕'
						}, {
							adid: '选项2',
							adn: '双皮奶'
						}, {
							adid: '选项3',
							adn: '蚵仔煎'
						}, {
							adid: '选项4',
							adn: '龙须面'
						}, {
							adid: '选项5',
							adn: '北京烤鸭'
						}]
					},
					rules: {
						//数据源model
						
						deport: [{
							required: true,
							message: '请选择仓库',
							trigger: 'change'
						}]
					}

				},
				methods: {
					submitForm(formName) {
						var iosnn=this;
						//验证方法
						this.$refs[formName].validate((valid) => {
							if(valid) {
								//alert("开始提交选择的仓库:"+iosnn.ruleForm.deport);
								var dep=iosnn.ruleForm.deport;
								var a=0,b=0,c=0,goos=0;
								var dos=true;
								//循环判断当前选择仓库数量是否可满足订单
								iosnn.goodItems.forEach(v => {
									if (dep==1) {
										if (v.adeport<v.gqueaty) {
											dos=false;
										}
									}else if (dep==2) {
										if (v.bdeport<v.gqueaty) {
											dos=false;
										}
									}else if (dep==3) {
										if (v.cdeport<v.gqueaty) {
											dos=false;
										}
									}
								});
								if (dos==false) {
									 this.$notify({
								          title: '警告',
								          message: '您选择仓库可能不能满足您的订单需求，您可以添加采购单填充库存。',
								          type: 'warning'
								        });
									
								}else{
									//生成出库单
									//post提交数据
									 axios.post("/addOutDeport",
										//参数转换
										Qs.stringify(this.ruleForm, {
											arrayFormat: 'brackets'
										})
										
									).then(function(v) {
										//window.parent.location.href="/shozhongordertwo";
										window.location.href='shozhongordertwo2?oid='+v.data;
									}).catch(function(e) {
										alert("出错了"+e);
									}); 
								}
								
								//post提交数据
								/* axios.post("/addOrderFromItem",
									//参数转换
									Qs.stringify(this.ruleForm, {
										arrayFormat: 'brackets'
									})
									
								).then(function(v) {
									window.parent.location.href="/shozhongordertwo";
								}).catch(function(e) {
									alert("出错了"+e);
								}); */

							} else {
								console.log('error submit!!');
								return false;
							}
						});
					}
				},mounted() {
					var sheslfse=${deportText};
					console.log(sheslfse);
					this.ruleForm.customertoman=sheslfse.deportshelf;
					this.ruleForm.oid=sheslfse.oid;
					this.goodItems=sheslfse.goodItem;
					console.log(sheslfse.goodItem);
				}

			});
		</script>

		</body>

</html>